<script setup>
  import { reactive, ref, computed } from 'vue'

  // 当前用户登录成功后的状态对象
  import {useUserStore} from "@/stores/counter.js"
  const userStore = useUserStore();
  // 根据状态创建响应式数据
  const userMsg = computed(()=>userStore.userMsg);

//   修改头像地址
  const avatarUrl = ref("http://localhost:3000/avatar");

//   设置默认头像
  const avatar = ref(userMsg.value.avatar || "https://avatars.githubusercontent.com/u/72015883?v=4");
  

//   修改头像时，要发送的其他数据
  const ops = reactive({
      uId: userStore.userMsg.uId,
      token: userStore.userMsg.token
  });

//   发起头像上传请求成功后的回调
  function success(file){
    if(file.code === 1){
        avatar.value = file.url;
        // 头像上传成功后，修改状态管理器中的头像信息
        // 其他用到此状态的组件，才会发生更新
        userStore.change_userMsg({
            avatar: file.url
        })
    }
  }
//   发起头像上传请求失败后的回调
  function error(){}
</script>

<template>
    <el-upload :action="avatarUrl" list-type="picture-card" :auto-upload="true" method="post" :multiple="true" :show-file-list="false" name="file" :data="ops"
    :onSuccess="success"
    :onError="error"
    >
        <img class="el-upload-list__item-thumbnail" :src="avatar" alt="" />
    </el-upload>
</template>  

<style>
.el-upload .el-upload-list__item-thumbnail{
    width:148px;
}
</style>